<template>
   <swiper id="swiper" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide
    v-for="(item,index) in sowing" :key="item.public_id">
    <img :src="item.icon_url" :alt="item.public_name"/>
    </swiper-slide>
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name:'Sowing',
    props:{
      sowing:Array
    },
    data() {
      return {
        swiperOption: {
              notNextTick: true,
              // 分页
              pagination: {
                  el: '.swiper-pagination',
                  clickable: true
              },
              // 循环
              loop: true,
              // 切换时长
              autoplay: {
                delay: 1000,
                disableOnInteraction : false,
              },
              
              // 速度
              speed: 1000,
              // 滑动后回调函数
              on: {
                  slideChangeTransitionEnd() {
                      // console.log(this.activeIndex);
                  }
              }
          }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted(){
      this.swiper.slideTo(5,300,false)
    },
    components: {
    swiper,
    swiperSlide
  },
  mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      // console.log('this is current swiper instance object', this.swiper)
      // this.swiper.slideTo(3, 1000, false)
    }
}
</script>
<style scoped>
    #swiper{
      width: 100%;
      height: 14rem;
      background-color: red;
    }
    #swiper img{
      width: 100%;
      height: 100%;
    }
    #swiper >>> .swiper-pagination-bullet-active{
      background-color: #75a342;
    }
</style>